import 'package:flutter/material.dart';
import 'package:flutter_mall/components/Swipers.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';
import 'package:flutter_mall/common/api.dart';

class GoodsDetail extends StatefulWidget {
  GoodsDetail({Key key,this.id}) : super(key:key);
  final String id;
  @override
  _GoodsDetailState createState() => _GoodsDetailState();
}

class _GoodsDetailState extends State<GoodsDetail> {
  int id; //商品id
  String name;
  final List imgs = [
    "http://hbimg.b0.upaiyun.com/a3e592c653ea46adfe1809e35cd7bc58508a6cb94307-aaO54C_fw658",
    "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2259614868,961155351&fm=26&gp=0.jpg"
  ];
  String htmlData = """
    <p><span style="color: #e03e2d;">用户的数据分为业务数据和行为数据</span>，什么是业务数据呢？如电商系统用户登录、加购、下单等行为会产生数据，这些数据会直接存储在业务数据库中。</p>
<p>业务数据就是对现实的虚拟化，比如用户在电商平台产生了下单动作，业务数据库会记录某个用户（用户ID）、某个商品（商品ID）、时间。</p>
<p>另外一类是用户行为数据，用户在互联网上的所有行为都可以被抽象为浏览和点击，通过什么方式知道用户在什么时间浏览了那个页面，点击了那个按钮呢？是需要进行数据的埋点，有了用户的行为数据我们可以更加了解我们的用户，当我们更加了解我们的用户，才能更好地服务我们的用户。</p>
<p>本文我们以电商产品的商品详情页为例，介绍如何做用户浏览以及点击行为的数据埋点。案例中包含一个页面（商品详情页）以及该页面上的关键按钮（加购、收藏按钮），具体页面如下图所示。</p>
<p><img src="http://hbimg.b0.upaiyun.com/a3e592c653ea46adfe1809e35cd7bc58508a6cb94307-aaO54C_fw658" /></p><p>本文我们以电商产品的商品详情页为例，介绍如何做用户浏览以及点击行为的数据埋点。案例中包含一个页面（商品详情页）以及该页面上的关键按钮（加购、收藏按钮），具体页面如下图所示。</p>
  """;
  @override
  void initState() {
    // TODO: implement initState
    id = int.parse(widget.id);
    name = widget.id;
    // Map<dynamic,dynamic> res = Api.demo({});
    // if(res["name"].length>1){
    //   name = res["name"];
    // }
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context,width: 750,height: 1334);
    return Scaffold(
      appBar: AppBar(
        title: Text("商品详情$name"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Swipers(imgs:imgs,height: 400),
                  Container(
                    padding: EdgeInsets.all(ScreenUtil().setWidth(30)),
                    color: Colors.white,
                    margin: EdgeInsets.only(bottom:ScreenUtil().setWidth(30)),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text("商品名称$id"),
                        Text("商品介绍$id"*6,style: TextStyle(fontSize: ScreenUtil().setWidth(26),color:Colors.grey[600])),
                        Text("￥99.00",style: TextStyle(color: Colors.red),)
                      ],
                    ),
                  ),
                  Container(
                    height: ScreenUtil().setWidth(100),
                    color: Colors.white,
                    padding: EdgeInsets.only(left:ScreenUtil().setWidth(30)),
                    child: Row(
                      children: <Widget>[
                        Text("商品详情")
                      ],
                    ),
                  ),
                  Html(
                    data: htmlData,
                    style: {
                      // "html": Style(
                      //   backgroundColor: Colors.black12,
                      // ),
                      // "table": Style(
                      //   backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
                      // ),
                      // "tr": Style(
                      //   border: Border(bottom: BorderSide(color: Colors.grey)),
                      // ),
                      // "th": Style(
                      //   padding: EdgeInsets.all(6),
                      //   backgroundColor: Colors.grey,
                      // ),
                      // "td": Style(
                      //   padding: EdgeInsets.all(6),
                      // ),
                      // "var": Style(fontFamily: 'serif'),
                      "span": Style(color: Colors.red)
                    },
                    onLinkTap: (url) {
                      print("Opening $url...");
                    },
                    onImageTap: (src) {
                      print(src);
                    },
                    onImageError: (exception, stackTrace) {
                      print(exception);
                    },
                  )
                ],
              ),
            )
          ),
          _bottom()
        ],
      )
    );
  }

  Widget _bottom() {
    return Container(
      color: Colors.white,
      height: ScreenUtil().setWidth(100),
      width: ScreenUtil().setWidth(750),
      child: Row(
        children: <Widget>[
          Container(
            width: ScreenUtil().setWidth(130),
            height: ScreenUtil().setHeight(100),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.home,color: Colors.red),
                  Text("首页",style: TextStyle(color: Colors.grey[600],fontSize: ScreenUtil().setWidth(24)),)
                ],
              ),
            ),
          ),
          Container(
            width: ScreenUtil().setWidth(130),
            height: ScreenUtil().setHeight(100),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.share,color: Colors.yellow[700]),
                  Text("分享",style: TextStyle(color: Colors.grey[600],fontSize: ScreenUtil().setWidth(24)),)
                ],
              ),
            ),
          ),
          Container(
            width: ScreenUtil().setWidth(130),
            height: ScreenUtil().setHeight(100),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.headset_mic,color: Colors.green),
                  Text("客服",style: TextStyle(color: Colors.grey[600],fontSize: ScreenUtil().setWidth(24)),)
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              height: ScreenUtil().setWidth(80),
              padding: EdgeInsets.only(right:ScreenUtil().setWidth(30)),
              child: DecoratedBox(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(ScreenUtil().setWidth(40)),
                  gradient: LinearGradient(colors: [Colors.red,Colors.orange[700]])
                ),
                child: Center(
                  child: Text("加入购物车",style: TextStyle(color: Colors.white),),
                ),
              ) ,
            )
          )
        ],
      ),
    );
  }
}